<template>
  <div class="print-preview-container">
    <div class="print-actions">
      <el-button type="primary" @click="handlePrint">打印</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>

    <div id="print-content" class="print-content">
      <div class="print-header">
        <h2>账单凭证</h2>
        <p>打印时间：{{ currentTime }}</p>
      </div>

      <div class="print-body">
        <div class="bill-info">
          <div class="info-row">
            <span class="label">账单编号：</span>
            <span class="value">{{ billInfo.billId }}</span>
          </div>
          <div class="info-row">
            <span class="label">费用名称：</span>
            <span class="value">{{ billInfo.pricingName }}</span>
          </div>
          <div class="info-row">
            <span class="label">应收金额：</span>
            <span class="value">{{ billInfo.billSum }}元</span>
          </div>
          <div class="info-row">
            <span class="label">实收金额：</span>
            <span class="value">{{ billInfo.actualAmount }}元</span>
          </div>
          <div class="info-row">
            <span class="label">缴费时间：</span>
            <span class="value">{{ billInfo.payTime }}</span>
          </div>
        </div>

        <div class="signature-area">
          <div class="signature-line"></div>
          <p>客户签字：________________</p>
        </div>
      </div>

      <div class="print-footer">
        <p>--- 感谢您的支持 ---</p>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: 'PrintPreview',
  data() {
    return {
      billInfo: {},
      currentTime: new Date().toLocaleString()
    }
  },
  created() {
    this.getBillInfo();
  },
  methods: {
    getBillInfo() {
      // const billId = this.$route.query.billId;
      // request.get(`/bill/detail/${billId}`)
      //   .then(res => {
      //     if (res.code === 200) {
      //       this.billInfo = res.data;
      //     }
      //   });
    },
    handlePrint() {
      window.print();
    },
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.print-preview-container {
  padding: 20px;
}

.print-actions {
  margin-bottom: 20px;
}

.print-content {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 20mm;
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.print-header {
  text-align: center;
  margin-bottom: 30px;
}

.print-body {
  margin: 30px 0;
}

.bill-info {
  margin-bottom: 50px;
}

.info-row {
  margin: 15px 0;
  font-size: 16px;
}

.label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
}

.signature-area {
  margin-top: 100px;
}

.signature-line {
  width: 200px;
  border-top: 1px solid #000;
  margin: 30px 0;
}

.print-footer {
  text-align: center;
  margin-top: 50px;
  font-style: italic;
}

/* 打印样式 */
@media print {
  body * {
    visibility: hidden;
  }

  #print-content,
  #print-content * {
    visibility: visible;
  }

  #print-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  .print-actions {
    display: none;
  }
}
</style>
